<template>

  <div class="swiper my-swiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item,index) in list"
        :key="index"
      >
        <img
          :src="item.prize.poster"
          alt=""
        >
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
let vm=null
export default {
  name: "BindBoxSwiper",
  components: {},
  props: {
    prizesList: {
      type: Array,
      default: [],
    },
  },
  watch: {
    prizesList: {
      deep: true,
      handler: function (newVal) {
        this.list = newVal;
        if (this.list.length) {
          this.$nextTick(() => {
            this.initData();
          });
        }
      },
    },
  },
  mounted() {},
  data() {
    return {
      list: [],
    };
  },
  created() {
    vm = this;
    this.list = this.prizesList;
    if (this.list.length) {
      this.$nextTick(() => {
        this.initData();
      });
    }
  },
  mounted() {
    let that = this;
    this.swiper.on("click", function () {
      // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
      const clickedIndex = this.clickedIndex;
      that.handleGoods(clickedIndex);
    });
  },
  methods: {
    handleGoods(index){
    },
    initData() {
      if (this.list.length >= 5) {
        var swiper = new Swiper(".my-swiper", {
          slidesPerView: "4.5",
          spaceBetween: 30,
          autoplay: true, //自动滚动
          loop: true, //循环
          loopAdditionalSlides: 4,
          speed: 1500, //滚动速度
          autoplayDisableOnInteraction: false,
          onClick: function (swiper) {
              console.log(333333333333333333333333)
                  let item = JSON.parse(this.clickedSlide.attributes["data-href"].nodeValue)
              console.log(item)
              // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
              // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
              const realIndex = this.realIndex;
              vm.handleGoods(realIndex);
            },
        });
        return;
      }
      var swiper = new Swiper(".my-swiper", {
        slidesPerView: "4.5",
        spaceBetween: 30,
        autoplay: false, //自动滚动
        loop: false, //循环
        loopAdditionalSlides: 4,
        speed: 1000, //滚动速度
        autoplayDisableOnInteraction: false,
          onClick: function (index) {
              // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
              // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
              const realIndex = this.realIndex;
              vm.handleGoods(realIndex);
            },
      });
    },
  },
};
</script>

<style scoped lang="less">
.my-swipe {
  img {
    width: 97px;
    height: auto;
  }
}
.swiper {
  // width: 72%;
  // height: 160px;
  background: #facf89;
  overflow: hidden;
  margin: auto;
  z-index: 11;
  background: none;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide {
  width: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: none;
  img {
    width: 97px;
    height: auto;
    max-height: 97px;
  }
}
.swiper .swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}
</style>
